<!DOCTYPE html>
<html>

<head>
  <title>藏宝游戏</title>
</head>

<body>
  <h1 id="heading">藏宝游戏</h1>
  <img id="map" width=400 height=400 src="treasuremap.png">

  <p id="distance"></p>

  <script src="https://code.jquery.com/jquery-2.1.0.js"></script>

  <script>
    //todo
    var getrandrom=function(x){
      return Math.floor(Math.random*x);
    }
    
    var getdistance=function(event,target){
      return Math.sqrt(Math.pow(event.offsetX-target.x,2)+(Math.pow(event.offsetY-target.y,2)));
    }
    var getredistance=function(distance){
      if(distance < 10){
                    return "Boiling hot!";
                } else if(distance < 20){
                    return "Really hot";
                } else if(distance < 40){
                    return "Hot";
                } else if(distance < 80){
                    return "Warm";
                } else if(distance < 160){
                    return "Cold";
                } else if(distance < 320){
                    return "Really cold";
                } else {
                    return "Freezing!";
                }
    }
    var h=400;
    var w=400;
    var click=0;
    var target={
      x:getrandrom(h),
      y:getrandrom(w)
    }
    $("#map").click(function(event){
      var distance=getdistance(event,target);
      var redistance=getredistance(distance);
      $("#distance").text(redistance);
    })
  </script>
</body>

</html>